<template>
	<div :id="id" class="badgeWhite baseContent" v-if="dataRend" v-loading="active">
		<basetitle>
			<slot slot="left">{{ dataRend.name }}</slot>
			<slot slot="right">
				<div class="rightFontCont"><i class="iconfont icon-shuaxin1 rightFont" @click="refreshFull(dataRend.prn)"></i></div>
			</slot>
		</basetitle>
		<div class="baseCont" style="padding-top: 4px;">
			<div class="chart-container baseRelative">
				<div class="flexStyle newsContent">
					<!-- <div class="newsContent-left newImg">
					<swiper :options="swiperOption"  ref="mySwiper">
							<!-- 这部分放你要渲染的那些内容 -->
					<!-- <swiper-slide v-for="(item,index) in dataRend.itemData.pic_url" :key="index">
								<img :src="item" class="index_img">
							</swiper-slide>  -->
					<!-- 这是轮播的小圆点 -->
					<!--  <div class="swiper-pagination" slot="pagination"></div>
					 </swiper>
					 </div> -->
					<div class="child newsContent-right overAuto" :style="{ height: dataRend.itemData.height != '' ? dataRend.itemData.height : defalutHeight }">
						<div class="tabContent">
							<el-radio-group v-model="tabPosition">
								<el-radio-button :label="item.order_no" v-for="(item, index) in tabCont" :key="item.order_no">{{ item.text }}</el-radio-button>
							</el-radio-group>
						</div>
						<ListplateFive v-for="(item, index) in newList" :key="index">
							<slot slot="left">
								<span class="iconfont icon-dian" style="font-size:22px;" :class="[item.ReadorNot == 'Y' ? 'colorGreen' : '']"></span>
                <!--@click="junpUrl(item)"-->
                <span :title="item.content" @click="jumpUrl(item)" class="hoverText" :class="[item.ReadorNot == 'Y' ? 'colorNoticeTitl' : '']">{{ item.text }}</span>
							</slot>
							<slot slot="right" :class="[item.ReadorNot == 'Y' ? 'colorNoticeTitl' : '']">{{ item.date }}</slot>
						</ListplateFive>
					</div>
				</div>
			</div>
			<!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" class="baseAbsolute" /> -->
		</div>
		<DolgNotice ref="dolgNotice" />
		<DolgNoticeNew ref="dolgNoticeNew" />
	</div>
</template>
<script>
import { generateMixed } from '@/utils/index.js';
import { getFromCache } from '@/utils/cache.js';
const basetitle =()=>import('@/components/basetitle/index.vue')//
const ListplateSix =()=>import('@/components/Listplate/ListplateSix.vue')//
const ListplateFive =()=>import('@/components/Listplate/ListplateFive.vue')//文字列表样式
import store from '../../../store'
import { mapState, mapActions,mapMutations } from 'vuex';
import {getHomePage,refreshContent,NoticePreview,NoticeGetOne,NoticeSearch} from "../../../api/config.js"
import DolgNotice from '@/components/DolgNotice/index.vue';
import DolgNoticeNew from '@/components/DolgNotice/indexNew.vue';
export default {
	name:'NewsCenter',
	mixins: [],
	props: {
		className: {
			type: String,
			default: 'baseId' + generateMixed('8')
		},
		id: {
			type: String,
			default: 'baseId' + generateMixed('8')
		},
		width: {
			type: String,
			default: '200px'
		},
		defalutStyle: {
			type: String,
			default: 'red'
		},
		itemdata: {
			default: Object
		},
		itemStyle: {
			default: Object
		},
		defalutHeight:{
			type: String,
			default: '300px'
		}
	},
	components: {
		basetitle,
		ListplateSix,
		ListplateFive,
		 DolgNotice,
		 DolgNoticeNew,
	},
	data() {
		return {
			image:require("../../../../static/image/u6.png"),
			tabPosition:"",
			list: null,
			swiperOption: {
				pagination:'.swiper-pagination',
				slidesPerView:'auto',
			    autoplay: {
				  delay:2500,
				  disableOnInteraction: false
				},
				centeredSlides: true,
				 pagination: {
				  el: '.swiper-pagination',
				  clickable: true
				},
				navigation: {
				  nextEl: '.swiper-button-next',
				  prevEl: '.swiper-button-prev'
				},
				paginationClickable: true,
				onSlideChangeEnd: swiper => {
					//这个位置放swiper的回调方法
					this.page = swiper.realIndex+1;
					this.index = swiper.realIndex;
				},
			},
			swiperSlides: [1, 2, 3, 4, 5],
			tabCont:'',
			newList:'',
			itemCont:new Map(),
			dataRend:'',
			active:false
		}
	},
	beforeDestroy() {},
	 computed: {
            swiper() {
              return this.$refs.mySwiper.swiper;
            },
			...mapState({
				   mainRend:state => store.state.base.mainRend
			})
        },
	mounted() {
    this.dataRend=this.itemdata;
    this.inntDateList();
	},
	methods: {
		...mapActions('base', ['getIndexRend']),
		...mapActions('dolgnotice', ['savedata']),
		...mapMutations('dolgnotice', ['saveOpen']),
    inntDateList(){
      this.tabCont=this.dataRend.itemData.list;
      this.newList=this.dataRend.itemData.list[0].sub_list;
      this.tabPosition=this.dataRend.itemData.list[0].order_no;
      for(let digit of this.tabCont){
        this.itemCont.set(digit.order_no,digit)
      }
    },
		refreshFull(prn){
			let that=this;
			that.active=true;
			let parms={};
			parms.type=prn;
      parms.user_prn = JSON.parse(getFromCache('userInfo')).env$user_prn;
			that.$post(refreshContent, parms).then(response => {
				setTimeout(function () {
				that.active=false;
				},2000);
				if (response.status === false){
				  that.$message.error(response.error[0]);
				  return
				}
				that.dataRend=response.obj;
        that.inntDateList();
			})
		},
    jumpUrl(item){
      let that=this;
      let parmas={};
      parmas.prn=item.prn;
      that.$post(NoticeGetOne,parmas).then(response => {
        if(response.status==true){
          that.$refs.dolgNoticeNew.dologVisible=true;
          that.$refs.dolgNoticeNew.oneNotice=response.obj;
          that.showAllNotice();
        }else{
          this.$message({
            message:response.error,
            type: 'warning'
          });
        }
      });
    },
    showAllNotice(){
      let that=this;
      let parms={};
      parms.userPrn=JSON.parse(getFromCache('userInfo')).env$user_prn;;
      parms.str='';
      that.$post(NoticeSearch, parms).then(response => {
        if (response.status === false){
          that.$message.error(response.error[0]);
          return
        }
        that.$refs.dolgNoticeNew.noticeTabelData=response.obj;
      })
    },
		junpUrl(item){
			let that=this;
				let parmas={};
				parmas.prn=item.prn;
				parmas.plate_prn =this.dataRend.prn;
				that.$post(NoticePreview,parmas).then(response => {
					console.log(response)
					if(response.status==true){
						let datas=response.obj;
						that.savedata(datas)
						this.$refs.dolgNotice.showModel()
					}else{
						 this.$message({
							  message:response.error,
							  type: 'warning'
							});
					}
				});
			}
	},
	watch:{
		tabPosition(){
			this.newList=this.itemCont.get(this.tabPosition).sub_list
		},
    mainRend(){
      this.dataRend=this.mainRend
		}
	}
}
</script>

<style></style>
